<template>
  <view class="join-rider">
    <view class="content content-success">
      <view class="title-desc">
        <!-- 申请加入骑士团  -->
        <view class="title">你已成为骑士</view>
        <!-- 加入骑士团，赚取更多的零花钱 -->
        <view class="desc">无所不能的骑士，祝你好运</view>
      </view>
      <image src="/static/images/home/bottom-img.png" mode="scaleToFill" />
    </view>
  </view>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.join-rider {
  width: 100%;
  padding: 30rpx;
  .content {
    height: 250rpx;
    background: linear-gradient(90deg, #dab18f, #c09471);
    border-radius: 36rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    .title-desc {
      .title {
        font-size: 42rpx;
        font-weight: bold;
        color: #ffffff;
      }
      .desc {
        font-size: 28rpx;
        color: #ffffff;
        margin-top: 20rpx;
      }
    }
    image {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .content-success {
    background: linear-gradient(90deg, #8dd893, #69c971);
  }
}
</style>
